<template>
<div class="user_login" :style="{ height: evieHeight}">
    <div class="input1">
        <div class="search">
            <icon class="first_icon" type="search" />
            <input v-model="Uname" type="text" placeholder="请输入客户姓名">
        </div>
        <div class="search_2" @click="souSuo">搜索</div>
    </div>
    <div v-show="show==0">
        <img class="img2" src="../../../static/img/login/kong.png">
        <div class="tiS">暂无搜索结果</div>
    </div>
    <div v-show="show==1" class="box">
        <div class="boxa">
            <div>客户姓名</div>
            <div>{{name}}</div>
        </div>
        <div class="boxb">
            <div>掉线时间</div>
            <div @click="selectTime1">{{diaox1}}</div>
            <div>
                <img src="../../../static/img/opration/right.png">
            </div>
        </div>
        <div class="boxb">
            <div>上线时间</div>
            <div @click="selectTime2">{{shangx1}}</div>
            <div>
                <img src="../../../static/img/opration/right.png">
            </div>
        </div>
        <div class="boxb">
            <div>机架编号</div>
            <div @click="choseList" v-if="biaoH.length < 1">请选择机架编号</div>
            <!-- <div v-if="selectSerce==0" @click="selectSerce=1">请选择机架编号</div> -->
            <!-- <div v-if="selectSerce!=0 && selectSerce!=1" @click="selectSerce=1">

已选择机架编号{{selectSerce[1].length}}个

</div> -->
            <div v-if="biaoH.length > 0" @click="choseList">
                已选择机架编号{{biaoH.length}}个
            </div>
            <div>
                <img src="../../../static/img/opration/right.png">
            </div>
        </div>
        <div class="boxb">
            <div>掉线原因</div>
            <div>
                <!-- 请选择掉线原因 -->
                <picker @change="bindPickerChange" :value="index1" :range="array">
                    <view class="picker">{{array[index1]}}</view>
                </picker>
            </div>
            <div>
                <img src="../../../static/img/opration/right.png">
            </div>
        </div>
        <div class="tJss" @click="tJss">提交</div>
    </div>
    <div v-if="selectTime==1">
        <shiJ @dsplay1="dsplay1" @dsplay2="dsplay2" :message="quf"></shiJ>
    </div>
    <!-- <div v-show="selectSerce==1" class="sercer" :style="{ height: evieHeight}">

<serchSelect @dsplay="dsplay" :List='list'></serchSelect>

</div>-->
    <!-- <div v-if="selectSerce==1" class="sercer" :style="{ height: evieHeight}">

<selectNomber @dsplay="dsplay" :List='list' ref="childList"></selectNomber>

</div>-->
</div>
</template>

<script>
import serchSelect from "../../components/serchSelect.vue"; /*列表commponet*/
import selectNomber from "../../components/selectNomber.vue";
import shiJ from "../../components/shiJ";
import md5 from "../../utils/md5";
import store from "../../store";
import js from "../../utils/js"
export default {
    name: "AccordingUser",
    data() {
        return {
            Uname: "",
            index1: 0,
            array: [
                "显卡问题",
                "矿机过热",
                "电信断网",
                "水电站断电",
                "风扇故障",
                "矿机维修",
                "其他原因"
            ],
            evieHeight: "",
            //模糊查询框
            selectSerce: 0,
            selectTime: 0,
            quf: "",
            //掉线时间
            diaox1: "请选择掉线时间",
            diaox2: "", //已选择掉线时间
            //上线时间
            shangx1: "请选择上线时间",
            shangx2: "", //已选择上线时间
            biaoH: "", //已选择编号
            yuanY: "显卡问题", //已选择原因
            name: "",
            list: "",
            me_id: "",
            show: 0
        };
    },
    components: {
        serchSelect,
        selectNomber,
        shiJ
    },
    onLoad() {
        this.biaoH = store.state.jijNo;
    },
    onShow() {
        this.biaoH = store.state.jijNo;
    },
    mounted() {
        this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
        this.selectSerce = 0;
    },
    methods: {
        choseList() {
            store.commit("changeList", this.list);
            wx.navigateTo({
                url: "../../pages/selectJJList/main"
            });
        },

        dsplay(e) {
            console.log(e);
            this.selectSerce = e;
            this.biaoH = e[1];
        },
        dsplay1(e) {
            this.selectTime = e;
            if (e[2] == 1) {
                this.diaox1 = e[1];
                this.diaox2 = e[3];
                //console.log(this.diaox1);
            }
            if (e[2] == 2) {
                this.shangx1 = e[1];
                this.shangx2 = e[3];
            }
        },
        dsplay2(e) {
            this.selectTime = e;
            if (e && e.length) {
                this.biaoH = e[1];
            }
        },
        selectTime1() {
            this.selectTime = 1;
            this.quf = 1;
        },
        selectTime2() {
            this.selectTime = 1;
            this.quf = 2;
        },
        bindPickerChange(e) {
            this.index1 = e.mp.detail.value;
            this.yuanY = this.array[e.mp.detail.value];
        },
        //提交
        tJss() {
            if (this.diaox2 == "") {
                wx.showToast({
                    title: "请选择掉线时间",
                    icon: "none"
                });
                return;
            }
            if (this.shangx2 == "") {
                wx.showToast({
                    title: "请选择上线时间",
                    icon: "none"
                });
                return;
            }
            if (this.biaoH == "") {
                wx.showToast({
                    title: "请选择编号",
                    icon: "none"
                });
                return;
            }
            if (this.yuanY == "") {
                this.yuanY = this.array[0];
                // wx.showToast({
                // 	title: "请选择原因",
                // 	icon: "none"
                // });
                return;
            }
            if (this.diaox2 >= this.shangx2) {
                wx.showToast({
                    title: "掉线时间不可大于或等于上线时间",
                    icon: "none"
                });
                return;
            }
            //return;
            let self = this;
            console.log(self.biaoH);
            wx.showLoading({
                title: "提交中..."
            });
            //this.$API = js(wx);
            this.$API
                .post(
                    "/Operation/postDrops", {
                        type: "drops_many",
                        uid: self.me_id,
                        fid: self.biaoH,
                        drop_line_time: self.diaox2,
                        on_line_time: self.shangx2,
                        content: self.yuanY,
                        token: wx.getStorageSync("user_token"),
                        user_id: wx.getStorageSync("user_id")
                    }
                    //true
                )
                .then(res => {
                    self.show = 0;
                    this.initData();
                   //wx.hideLoading()
                    wx.showToast({
                        title: "提交成功"
                    });
                });
        },
        initData() {
            this.Uname = this.name = "";
            this.diaox1 = "请选择掉线时间";
            this.shangx1 = "请选择上线时间";
            this.yuanY = "显卡问题";
            this.index1 = 0;
            this.biaoH = [];
            store.commit("updateCheckNo", []);
        },
        //搜索
        souSuo() {
            if (this.Uname.trim() == "") {
                wx.showToast({
                    title: "搜索前请先输入用户姓名",
                    icon: "none"
                });
                return;
            }
            let self = this;
            //wx.showLoading();
            //this.$API = js(wx);
            this.$API
                .post(
                    "/Operation/informationRetrieval", {
                        user_name: this.Uname.trim(),
                        type: "information_users",
                        token: wx.getStorageSync("user_token"),
                        user_id: wx.getStorageSync("user_id")
                    }
                    //true
                )
                .then(res => {
                    if (res.status == 0) {
                        self.show = 1;
                        self.name = res.result.users.name;
                        self.list = res.result.list;
                        self.me_id = res.result.users.id;
                    } else {
                        wx.showToast({
                            title: res.data.msg
                        });
                    }
                   //wx.hideLoading()
                });
        }
    },
    onUnload() {
        this.Uname = "";
    },
    watch: {
        Uname(a, b) {
            if (a == "") {
                this.show = 0;
            }
        },
        $route: {
            handler: function (val, oldVal) {
                console.log(val);
            },
            // 深度观察监听
            deep: true
        }
    },
    created() {}
};
</script>

<style scoped>
.user_login {
    width: 750rpx;
    position: relative;
    overflow: hidden;
    background-color: white;
}

.input1 {
    width: 750rpx;
    height: 88rpx;
    background-color: #fafafa;
    font-size: 28rpx;
}

.first_icon {
    width: 40rpx;
    height: 40rpx;
    margin-top: 10rpx;
}

.search {
    width: 600rpx;
    float: left;
    height: 60rpx;
    border-radius: 60rpx;
    background-color: rgb(243, 239, 239);
    margin-left: 30rpx;
    margin-top: 14rpx;
}

.search input {
    height: 40rpx;
    margin-left: 70rpx;
    margin-top: 10rpx;
}

.first_icon {
    float: left;
    margin-left: 10rpx;
}

.search_2 {
    width: 90rpx;
    float: left;
    text-align: right;
    line-height: 88rpx;
}

.img2 {
    width: 212rpx;
    height: 166rpx;
    margin-left: 269rpx;
    margin-top: 150rpx;
}

.tiS {
    text-align: center;
    color: #999999;
    font-size: 24rpx;
}

.boxa,
.boxb {
    width: 720rpx;
    height: 100rpx;
    margin-left: 30rpx;
    border-bottom: 2rpx solid #e5e5e5;
    box-sizing: border-box;
}

.boxa>div {
    width: 345rpx;
    float: left;
    line-height: 100rpx;
}

.boxa>div:nth-of-type(1) {
    font-weight: bolder;
    font-size: 32rpx;
}

.boxa>div:nth-of-type(2) {
    font-size: 32rpx;
    text-align: right;
    color: #999999;
}

.boxb div:nth-of-type(1) {
    font-weight: bolder;
    font-size: 32rpx;
    float: left;
    line-height: 100rpx;
    width: 200rpx;
}

.boxb div:nth-of-type(2) {
    text-align: right;
    color: #999999;
    font-size: 32rpx;
    float: left;
    line-height: 100rpx;
    width: 430rpx;
}

.boxb img {
    width: 40rpx;
    height: 40rpx;
}

.boxb div:nth-of-type(3) {
    font-weight: bolder;
    font-size: 32rpx;
    float: left;
    margin-left: 30rpx;
    margin-top: 30rpx;
}

.tJss {
    width: 560rpx;
    height: 80rpx;
    color: white;
    font-size: 32rpx;
    background-color: #20c9e1;
    text-align: center;
    line-height: 80rpx;
    border-radius: 8rpx;
    margin-left: 95rpx;
    margin-top: 100rpx;
    top: 600rpx;
}

.sercer {
    width: 750rpx;
    background-color: white;
    position: absolute;
    top: 0;
    z-index: 10;
    overflow: scroll;
}
</style>
